<template>
	<view class="flex_sbc">
		<view class="teach-tit">选择学员</view>
		<view class="flex_fsc">
			<view class="uni-585C66">如无可选学员请</view>
			<view class="chang-button" style="width: 120rpx;" @click="createPlayer">新建学员</view>
		</view>
	</view>
	<view v-if="selStudentObj.id" class="flex_fsc">
		<image :src="setting.oss_pub_domain + selStudentObj.avatar" class="user-head-img"></image>
		<view>{{ selStudentObj.name }}</view>
		<view class="chang-button" @click="open">修改</view>
	</view>
	<view v-else class="select-student flex_cc" @click="open">
		<image :src="setting.oss_pub_domain + '/app-img/icon/icon-add-main.png'"></image>
		<text>选择学员</text>
	</view>
	<uni-popup ref="popup" :mask-click="false" type="center">
		<view class="tk-con">
			<view class="tk-tit">
				<text>选择学员</text>
				<image
					:src="setting.oss_pub_domain + '/app-img/icon/tk-close.png'"
					@click="$refs.popup.close()"
				></image>
			</view>
			<view class="cp-search flex_fsc">
				<uni-icons type="search" size="16" class="uni-mr-16"></uni-icons>
				<input type="text" placeholder="搜索学员名称" placeholder-class="uni-placeholder" />
			</view>
			<scroll-view scroll-y class="student-list" @scrolltolower="nextPlayer">
				<view v-if="player.list && player.list.length">
					<view
						v-for="item in player.list"
						:key="item.id"
						:class="{ current: tmpSel.id == item.id }"
						@click="selStudent(item)"
					>
						<view class="student-con flex_fsc">
							<image class="user-head" :src="setting.oss_pub_domain + item.avatar"></image>
							<view class="student-name">{{ item.name }}</view>
							<view class="student-status flex_fsc">
								<text :class="{ selected: item.studyStatus == '1' }">
									{{ item.studyStatus == '1' ? '在训' : '停训' }}
								</text>
								<image
									:src="`${setting.oss_pub_domain}/app-img/icon/${
										tmpSel.id == item.id ? 'student_selected' : 'student_select'
									}.png`"
								></image>
							</view>
						</view>
						<view class="ht"></view>
					</view>
				</view>
				<z-no-data v-else></z-no-data>
			</scroll-view>
			<view class="student-sub" @click="submitStudent">确定</view>
		</view>
	</uni-popup>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { getPlayerList } from '@/api/player.js';

function createPlayer() {
	uni.removeStorageSync('player-profile')
	uni.navigateTo({
		url: '/pages/player/add/add?ps=1',
		events: {
			done(data) {
				selStudentObj.value = data
				emit('done', selStudentObj.value)
			}
		}
	})
}
// 球员列表
const player = reactive({
	list: [],
	pageNum: 1,
	total: 0
});
function fetchPlayerList() {
	getPlayerList({ pageNum: player.pageNum }).then((res) => {
		if (player.pageNum == 1) player.list = res.rows;
		else player.list.push(...res.rows);
		player.total = res.total;
	});
}

function nextPlayer() {
	if (player.list.length >= player.total) return;
	player.pageNum += 1;
	fetchPlayerList();
}

// 选择学员弹窗
const selStudentObj = ref({});
const popup = ref(null),
	tmpSel = ref({});
function open() {
	popup.value.open();
	tmpSel.value = selStudentObj.value;
	player.pageNum = 1;
	fetchPlayerList();
}
defineExpose({ open });

function selStudent(item) {
	if (item.studyStatus == '0') return;
	tmpSel.value = item;
}

const emit = defineEmits(['done'])
function submitStudent() {
	selStudentObj.value = tmpSel.value;
	uni.setStorageSync('player-info', selStudentObj.value);
	emit('done', selStudentObj.value)
	popup.value.close();
}
</script>
<style scoped lang="scss">
.con{
	margin: 0 40rpx;
}
.teach-tit{
	font-size: 32rpx;
	font-weight: 600;
	color: $uni-text-color;
	line-height: 44rpx;
	padding-top: 60rpx;
	margin-bottom: 44rpx;
}
.teach-tit text{
	font-size: 24rpx;
	font-weight: 400;
	color: #C4C7CC;
	line-height: 34rpx;
	display: inline-block;
	margin-left: 20rpx;
}
.select-student{
	height: 80rpx;
	background: #F0F5F4;
	border-radius: 73rpx;
	border: 2rpx dashed $uni-text-color-main;
	font-size: 28rpx;
	color: $uni-text-color-main;
}
.select-student image{
	width: 48rpx;
	height: 48rpx;
	margin-right: 4rpx;
}
.selectl-course{
	border-color:#C4C7CC;
	color: #C4C7CC;
	background: $uni-white;
}
.select-date{
	height: 88rpx;
	border-radius: 16rpx;
	border: 2rpx solid #E8EAED;
}
.select-date .dataimg{
	width: 32rpx;
	height: 32rpx;
	padding: 0 16rpx 0 32rpx;
}
.select-time{
	margin-top: 24rpx;
}
.select-time-con{
	width: 256rpx;
	height: 80rpx;
	border-radius: 16rpx;
	border: 2rpx solid #E8EAED;
	padding: 0 24rpx 0 32rpx;
}
.space{
	margin: 0 12rpx;
}
.input-placeholder{
	font-size: 28rpx;
	color:#C4C7CC
}
.select-time-con .timeimg{
	width: 32rpx;
	height: 32rpx;
	flex-shrink: 0;
}
.tk-con{
	background: $uni-white;
	border-radius: 24rpx;
	width: 672rpx;
	padding-bottom:40rpx;
	box-sizing: border-box;
}
.tk-tit{
	font-size: 32rpx;
	color: $uni-text-color;
	line-height: 44rpx;
	text-align: center;
	position: relative;
	padding: 22rpx 0;
}
.tk-tit image{
	width: 32rpx;
	height: 32rpx;
	position: absolute;
	right: 22rpx;
	top: 24rpx;
}
.cp-search {
	background: $uni-F5F5F5;
	height: 68rpx;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 0 24rpx;
	margin: 12rpx 40rpx 14rpx;
}
.cp-search input{
	width: 100%;
}
.student-con{
	margin: 10rpx 0;
	padding: 18rpx 40rpx;
}
.user-head{
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	margin-right: 32rpx;
	background: $uni-F5F5F5;
	flex-shrink: 0;
}

.user-head-img {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-right: 32rpx;
	background: $uni-F5F5F5;
	flex-shrink: 0;
}

.chang-button {
	width: 88rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	border-radius: 24rpx;
	border: 2rpx solid #008965;
	font-size: 24rpx;
	color: #008965;
	margin-left: 32rpx;
	flex-shrink: 0;
}

.student-list {
	max-height: 60vh;
}

.student-name{
	font-size: 28rpx;
	color: $uni-text-color;
	line-height: 40rpx;
	width: 100%;
}
.student-status{
	flex-shrink: 0;
}
.student-status text{
	display: inline-block;
	margin-right: 32rpx;
	color: #8A8F99;
}
.student-status text.selected{
	color: $uni-text-color-main;
}
.student-status image{
	width: 32rpx;
	height: 32rpx;
}
.ht{
	height: 2rpx;
	background: #EBEDED;
	margin-left: 100rpx;
	margin-right: 10rpx;
}
.student-sub{
	height: 80rpx;
	line-height: 80rpx;
	background: $uni-text-color-main;
	border-radius: 16rpx;
	color: $uni-white;
	font-size: 32rpx;
	text-align: center;
	margin: 60rpx 40rpx 0;
}
.current{
	background-color: #F3F5F5;
}

.course-box {
	width: 100%;
	padding: 20rpx 32rpx;
	box-sizing: border-box;
	background: #F8F9FA;
}
</style>
